<template>
  <div class="app-relative">
    <div v-show="tab === 1" class="container-1" />
    <div v-show="tab === 1" class="container-2" />
    <div v-show="tab === 2" class="container-3" />
    <div class="app-absolute" style="width: 75px;height: 40px ;top: 288px;left: 66px;" @click="tab=1" />
    <div class="app-absolute" style="width: 75px;height: 40px ;top: 288px;right: 66px;" @click="tab=2" />
    <div class="app-absolute" style="width: 40px;height: 40px ;top: 8px;left: 10px;" @click="$router.back()" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tab: 1
    }
  }
}
</script>

<style lang="scss">
.container-1 {
    height: 605px;
    background: url(~@/assets/2-2.png);
    background-size: cover;
    background-position-y: -40px;
    background-repeat:  no-repeat;
}
.container-2 {
    height: 435px;
    background: url(~@/assets/1-1.png);
    background-size: cover;
    background-position-y: -300px;
    background-repeat:  no-repeat;
}
.container-3 {
    height: 600px;
    background: url(~@/assets/3-3.png);
    background-size: cover;
    background-position-y: -40px;
    background-repeat:  no-repeat;
}
</style>
